<script lang="ts" setup>
import Requiredorder from '@/api/Ordermanagement'
import { QueryParams } from '@/types/public'
import { numberToCurrencyNo } from '@/utils'
import { getorderStatus, getorderType } from './data'
import { reactive } from 'vue'
import { useRoute } from 'vue-router'
import appStore from '@/store'

const route = useRoute()
const { id, time, servicetype, ordertype, status, shouldpay, desc } = route.query

//定义传参数据
interface Order {
  名称ID: string
  区域: string
  产品类型: string
  产品规格: string
  企业项目: string
  计费模式: string
  数量: string
  使用量类型: string
}
const Tabledata: Order[] = [
  {
    名称ID: 'CD8415481366497131',
    区域: '亚太',
    产品类型: '弹性云服务器',
    产品规格: '通用计算机增强型',
    企业项目: 'default',
    计费模式: '按需',
    数量: '1',
    使用量类型: '时长'
  }
]

//调用接口数据 extends?
interface QueryonDemand extends QueryParams {
  userId: string
  orderId?: string
  total?: number
}
const queryonDemand: QueryonDemand = reactive({ userId: localStorage.getItem('userId') as string, page: 1, pageSize: 10 })

const getList = () => {
  Requiredorder.getonDemand(queryonDemand).then((res) => {
    tableData.length = 0
    tableData.push(...res.data.data.onDemandOrder)
    queryonDemand.total = res.data.data.totalCount
  })
}
getList()

const handleSizeChange = (val: number) => {
  queryonDemand.page = 1
  queryonDemand.pageSize = val
  getList()
}
const handleCurrentChange = (val: number) => {
  queryonDemand.page = val
  getList()
}
let tableData: Array<QueryonDemand> = reactive([])

const getOrdernumber = function (row: any, column: any, cellValue: any, index: any) {
  return cellValue
}
const moneyFormat = function (row: any, column: any, cellValue: any, index: any) {
  return '￥' + numberToCurrencyNo(cellValue)
}
const orderTypeFormat = function (cellValue: any) {
  let str = ''
  for (const key in getorderType) {
    if (Object.prototype.hasOwnProperty.call(getorderType, key)) {
      const element = getorderType[key]
      for (const k in element.child) {
        if (Object.prototype.hasOwnProperty.call(element.child, k)) {
          const val = element.child[k]
          if (cellValue === val.value) {
            str = val.text
          }
        }
      }
    }
  }

  return str
}
const findordertype = function (ordertype: any) {
  const type: any = getorderType[0].child.find((v: any) => v.id === ordertype)
  return type
}

const findstatus = function (cellValue: any) {
  const status: any = getorderStatus[0].child.find((v: any) => v.id === cellValue)
  return status
}

if (appStore.publicStore.breadcrumbData.length) {

  sessionStorage.setItem('breadcrumbData', JSON.stringify([...appStore.publicStore.breadcrumbData, { title: "abc" }]))
  appStore.publicStore.updateBreadcrum([...appStore.publicStore.breadcrumbData, { title: "abc" }])
} else {
  appStore.publicStore.updateBreadcrum(JSON.parse(sessionStorage.getItem('breadcrumbData') as string))
}
</script>

<template>
  <div class="content-box">
    <div class="select-title">订单号：{{ id }}</div>
    <div class="tips">
      <img style="margin-left: 20px; height: 40px; width: 40px" src="@/assets/svg/correct.svg" /><span
        style="margin-left: 20px; font-size: 18px">已完成</span><span style="margin-left: 20px">|</span><span
        style="margin-left: 20px">应付金额：￥2,000.00</span><span style="margin-left: 20px">实际金额：</span><span
        style="font-size: 24px">2,000.00</span>

      <div></div>
    </div>
    <div class="info">
      <span style="color: #556279">创建时间</span><span style="margin-left: 20px">{{ time }}</span><span
        style="margin-left: 64px; color: #556279">订单类型</span><span style="margin-left: 20px">{{ findstatus(status).text
        }}</span>
    </div>
    <div class="resource">资源信息</div>
    <el-table :row-style="{ height: '34px' }" :data="Tabledata" style="width: 100%; margin-bottom: 20px; padding: 0 30px">
      <el-table-column label="资源信息">
        <div>{{ desc }}</div>
      </el-table-column>
      <el-table-column label="其他信息">
        <div>{{ servicetype }}</div>
      </el-table-column>
      <el-table-column label="订单类型">
        <div>{{ findordertype(ordertype).text }}</div>
      </el-table-column>
      <el-table-column label="支付信息（元）">
        <div>{{ shouldpay }}</div>
      </el-table-column>
      <el-table-column label="减扣金额（元）">
        <div>￥0.00</div>
      </el-table-column>
      <el-table-column label="应付金额（元）">
        <div>{{ shouldpay }}</div>
      </el-table-column>
      <el-table-column label="实际付款（元）">
        <div>{{ shouldpay }}</div>
      </el-table-column>
      <el-table-column label="交易记录跟踪">
        <div>{{ time }} {{ findstatus(status).text }}</div>
      </el-table-column>
    </el-table>
    <div class="total">
      <span style="margin-left: 1%">总计</span><span style="margin-left: 36.65%">{{ shouldpay }}</span><span
        style="margin-left: 10.65%">￥0.00</span><span style="margin-left: 10.65%">{{ shouldpay }}</span>
    </div>
    <div class="pay-select">
      <div style="margin-left: auto"><span>实际付款：</span><span style="color: #ff7500; font-size: 24px">{{ shouldpay }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content-box {
  background: $blank-color;
  height: auto;

  .Statusline {
    display: flex;
    align-items: center;

    .finishedcircle {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-right: 10px;
    }
  }

  :deep(.el-input__wrapper) {
    border-radius: 0px;
    height: 34px;
    width: 180px;
  }

  .select-title {
    height: 69px;
    padding: 0 30px;
    align-items: center;
    display: flex;
    font-size: 18px;
    font-weight: 700;
    color: $text-color;
  }

  .tips {
    height: 76px;
    display: flex;
    align-items: center;
    margin: 0 30px;
    background: rgba(0, 198, 180, 0.1);
    border-top: 2px solid #00c6b4;
    font-size: 14px;
  }

  .info {
    height: 69px;
    margin: 0 30px;
    align-items: center;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    border-bottom: 1px solid #e7e9ef;
  }

  .resource {
    height: 69px;
    margin: 0 30px;
    align-items: center;
    display: flex;
    font-size: 18px;
    font-weight: 700;
  }

  :deep(thead tr th) {
    background-color: #f6f7fa !important;
    height: 34px;
  }

  :deep(.el-table .el-table__cell) {
    padding: 0;
  }

  .total {
    height: 54px;
    margin: 0 30px;
    align-items: center;
    display: flex;
    font-size: 14px;
    font-weight: 700;
    background-color: #f6f7fa;
  }

  .pay-select {
    height: 69px;
    padding: 0 30px;
    align-items: center;
    display: flex;
    font-size: 18px;
    font-weight: 700;
    color: $text-color;

    .blog {
      width: 100px;
      height: 34px;
      cursor: pointer;
      background-color: #ff7500;
      color: white;
      border: 0px;
    }
  }
}</style>
